<template>
  <div class="box">
    <template v-if="data">
      <div class="header">
        <span @click="goHome()">首页</span>
      </div>
      <h1 class="title">{{ data.result.nname }}</h1>
      <div class="info">
        <div class="time">
          <span>{{ textCreateTime }}</span>
          <span>来源: 新华社</span>
        </div>
        <span>举报</span>
      </div>
      <div class="container">
        <div class="share">
          <span>分享至</span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div>
          <!-- <video :src="data.result.ntext" autoplay controls></video> -->
        </div>
        <div class="main">
          <video
            v-if="data.result.cid == 3"
            :src="data.result.ntext"
            controls
            autoplay
          ></video>
          <div
            class="video-text"
            v-html="
              data.result.cid == 3 ? data.result.nvideo : data.result.ntext
            "
          ></div>
        </div>
      </div>
      <div class="comment">
        <textarea
          v-model="newcomment"
          placeholder="请输入您的评论..."
          class="text"
        ></textarea>
        <div class="btn_tj">
          <span @click="commentAdd()">发表</span>
        </div>
        <div v-if="comment.length">
          <div v-for="value in comment" :key="value.coid" class="comment-item">
            <div>
              <div class="user">
                <img class="portrait" v-if="value.ulogo" :src="value.ulogo" />
                <!-- <span>{{ value.uid }}</span> -->
                <img
                  v-else
                  class="portrait"
                  src="https://p3.toutiaoimg.com/img/3793/3131589739~0x0.image"
                  alt=""
                />
                <span>{{ value.unickname }}</span>
              </div>
              <span>{{ value.cotext }}</span>
              <div>
                <span>{{ getTime(value.createtime) }}</span>
                <span>回复</span>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="comment-none">
          暂时无人发表评论，欢迎发表您的评论
        </div>
      </div>
      <div v-if="curtain" class="curtain">
        <div class="login">
          <i class="el-icon-warning-outline"></i>
          <s @click="closeCurtain()" class="el-icon-circle-close"></s>
          <span>您当前未登陆，前往<i @click="goLogin()">登录</i></span>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      data: "",
      comment: "",
      textCreateTime: null,
      createTime: "",
      timeMinutes: null,
      curtain: false,
      newcomment: "",
    };
  },
  methods: {
    getData() {
      const nid = this.$route.query.nid;
      const url = `http://1.14.30.101:8888/detail?nid=${nid}`;
      this.axios.get(url).then((res) => {
        this.data = res.data;
        let s = this.moment(res.data.result.createtime).utc()._d;
        let i = this.moment(s).format("YYYY年MM月DD日 HH:mm:ss");
        this.textCreateTime = i;
      });
    },
    getCom() {
      const nid = this.$route.query.nid;
      let url = `http://1.14.30.101:8888/getcomments?nid=${nid}`;
      this.axios.get(url).then((res) => {
        this.comment = res.data.result;
        console.log(this.comment);
      });
    },
    getTime(time) {
      let now = new Date();
      let chinaTime = this.moment(time).utc()._d;
      let comCreatetime = this.moment(chinaTime).format("YYYY年MM月DD日 HH:mm");
      let comTimeMinutes = chinaTime.getTime();
      let f = now.getTime() - comTimeMinutes;
      // console.log(1, f);
      if (f > 432000000) {
        return this.moment(chinaTime).format("YYYY年MM月DD日");
      } else if (f > 259200000) {
        return "3天前";
      } else if (f > 172800000) {
        return "2天前";
      } else if (f > 86400000) {
        return "1天前";
      } else if (f > 36000000) {
        return "10小时前";
      } else if (f > 18000000) {
        return "5小时前";
      } else if (f > 14400000) {
        return "4小时前";
      } else if (f > 10800000) {
        return "3小时前";
      } else if (f > 7200000) {
        return "2小时前";
      } else if (f > 3600000) {
        return "1小时前";
      } else if (f > 300000) {
        return Math.floor(f / 60 / 1000) + "分钟前";
      } else {
        return "刚刚";
      }
    },
    commentAdd() {
      if (!this.unickname) {
        document.documentElement.style.overflow = "hidden";
        this.curtain = true;
        return;
      }
      console.log(this.newcomment);
      let url = "http://1.14.30.101:8888/addcomment";
      let params = `nid=${this.data.result.nid}&uid=${this.uid}&cotext=${this.newcomment}`;
      this.axios.post(url, params).then((res) => {
        this.getCom();
      });
    },
    closeCurtain() {
      document.documentElement.style.overflow = "scroll";
      this.curtain = false;
    },
    goLogin() {
      document.documentElement.style.overflow = "scroll";
      this.curtain = false;
      this.$router.push("/login");
    },
    goHome() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.getData();
    this.getCom();
  },
  computed: {
    ...mapState(["unickname", "uid"]),
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #f8f8f8;
}
.title {
  font-size: 34px;
  font-weight: bold;
  width: 1075px;
  text-align: center;
  line-height: 40px;
  margin: 0 auto;
  padding: 80px 0 20px 0;
}
.info {
  width: 1075px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  color: #999999;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
  > div {
    > span {
      display: inline-block;
      margin: 0 10px;
    }
  }
  > span {
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
}
.container {
  width: 1075px;
  margin: 0 auto;
  position: relative;
}
.share {
  display: flex;
  position: absolute;
  top: 50px;
  left: 40px;
  flex-direction: column;
  > span {
    color: #999999;
    &:not(:first-child) {
      margin: 20px 10px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      // background: url(../../static/images/icon_qqzone.a2a6bdb.svg) no-repeat;
    }
    &:nth-child(2) {
      background: url("../assets/img/f2/icon_weibo.a39951d.svg") no-repeat;
      background-size: 100% 100%;
    }
    &:nth-child(3) {
      background: url("../assets/img/f2/icon_weixin.0eb927d.svg") no-repeat;
      background-size: 100% 100%;
    }
    &:last-child {
      background: url("../assets/img/f2/icon_qqzone.a2a6bdb.svg") no-repeat;
      background-size: 100% 100%;
    }
  }
}
.main {
  text-align: center;
  div {
    text-align: left;
    width: 800px;
    margin: 0 auto;
    font-size: 18px;
  }
}
.header {
  user-select: none;
  background: #90080e;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  color: white;
  line-height: 40px;
  font-size: 16px;
  position: fixed;
  padding-left: 10px;
  left: 0;
  top: 0;
  z-index: 5;
  > span {
    cursor: pointer;
  }
}
.comment {
  width: 800px;
  margin: 0 auto;
  padding: 50px 20px;
  text-align: center;
  > .text {
    width: 700px;
    height: 100px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
  }
  > .btn_tj {
    width: 722px;
    margin: 15px auto;
    text-align: right;
    > span {
      display: inline-block;
      padding: 15px 40px;
      border-radius: 40px;
      background-color: #90080e;
      font-size: 20px;
      color: white;
      user-select: none;
      cursor: pointer;
      &:hover {
        opacity: 0.85;
      }
    }
  }
  .comment-item {
    border-radius: 10px;
    border: 1px solid #ccc;
    margin: 0 auto;
    text-align: left;
    box-sizing: border-box;
    width: 800px;
    padding: 0 30px;
    background-color: #fff;
    > div {
      border-bottom: 1px solid #ddd;
      padding: 10px 0 20px 0;
      display: flex;
      flex-direction: column;
      > div:first-child > span {
        display: inline-block;
        margin: 10px 0;
        &:first-child {
          font-weight: bold;
          font-size: 16px;
        }
        &:nth-child(2) {
          color: #333;
          font-size: 14px;
          padding-left: 10px;
        }
      }
      > span {
        display: inline-block;
        margin: 10px 0 10px 20px;
        font-size: 15px;
        color: #333;
      }
      > div:last-child {
        display: flex;
        justify-content: space-between;
        color: #aaa;
        font-size: 12px;
        padding: 0 20px;
        cursor: pointer;
        > span:last-child {
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }
  .comment-none {
    width: 800px;
    height: 125px;
    text-align: center;
    margin-top: 30px;
    font-size: 18px;
    color: #666;
  }
}
.curtain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.7);
  > .login {
    box-shadow: 0px 0px 10px 5px #aaa;
    user-select: none;
    background-color: rgb(228, 237, 243);
    width: 350px;
    height: 170px;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -80px 0 0 -170px;
    > i {
      font-size: 50px;
      color: #fff;
      background-color: #444;
      border-radius: 50%;
      position: absolute;
      left: 10px;
      top: 50%;
      margin-top: -28px;
    }
    > s {
      font-size: 40px;
      color: rgb(235, 126, 126);
      position: absolute;
      right: 5px;
      top: 5px;
      cursor: pointer;
      &:active {
        color: #0aa1ed;
      }
    }
    > span {
      font-size: 16px;
      color: #333;
      position: absolute;
      left: 100px;
      top: 50%;
      margin-top: -12px;
      > i {
        margin-left: 4px;
        color: red;
        cursor: pointer;
        &:hover {
          color: #0aa1ed;
        }
      }
    }
  }
}
.user {
  display: flex;
  align-items: center;
}
.portrait {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>

<style lang="scss">
.main > div > #detail,
.main-aticle p {
  display: block;
  line-height: 30px;
  margin: 30px 0 !important;
}
.control-bar,
.player-control-text {
  display: none;
}
.PlayToggle,
.play-layer-leftBottom,
.FullScreen {
  img {
    display: none !important;
  }
}
.main > div > #detail,
.main-aticle {
  img,
  > div > img {
    position: relative;
    overflow: hidden;
    max-width: 676px;
    max-height: 507px;
    &::after {
      content: url("https://p3.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/014a6ef255554f19a2b5415fa21e1ae1?from=pc");
      display: block;
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .player-container {
    display: none !important;
  }
}
</style>
